<template>
	<view class="contont">
		<nav-bar :title="title" :iconLeft="true" />
		<view class="content-bgc">
			<custom-list-de :record="detail_record" :columns="columns">
				<template #picture="{ text }">
					<image v-for="value in text" :src="value" class="preview-img" @click="previewImage(value)" />
				</template>
				<template #status_display="{ text, record }">
					<up-tag v-if="text == '待接单'" size="mini" :text="text" type="primary" plain plainFill />
					<up-tag v-if="text == '维修中'" size="mini" :text="text" type="warning" plain plainFill />
					<up-tag v-if="text == '已完成'" size="mini" :text="text" type="success" plain plainFill />
					<up-tag v-if="text == '已取消'" size="mini" :text="text" type="error" plain plainFill />
				</template>
			</custom-list-de>
			<uni-card v-if="repailDetail" title="维修详情" margin="0" spacing="0">
				<view class="ctent">维修人姓名：{{ repailDetail.task_full_name }}</view>
				<view class="ctent">维修人联系方式：{{ repailDetail.task_phone }}</view>
				<view class="ctent">维修时间：{{ repailDetail.repair_time }}</view>
				<view class="ctent">维修详情：{{ repailDetail.repair_details }}</view>
				<image v-for="value in detail_record.repairImg" :src="value" class="preview-img" @click="previewImage(value)" />
			</uni-card>
		</view>
	</view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import deRepairApi from '../../../api/device/de_repair'

const detail_record = ref({})
const title = '设备维修详情';
onLoad(option => {
	get_detail(option.id);
})

const columns = [
	{ title: "照片", dataIndex: 'picture', scopedSlots: 'picture' },
	{ title: "编号", dataIndex: 'code' },
	{ title: "维修主题", dataIndex: 'title' },
	{ title: "状态", dataIndex: 'status_display', scopedSlots: 'status_display' },
	{ title: "维修设备", dataIndex: 'device_name' },
	{ title: "提交人", dataIndex: 'create_full_name' },
	{ title: "创建时间", dataIndex: 'create_date' },
	{ title: "接单时间", dataIndex: 'task_date' },
	{ title: "完成时间", dataIndex: 'finish_date' },
	{ title: "取消时间", dataIndex: 'close_date' },
	{ title: "故障描述", dataIndex: 'fault_description', note: true },


]

const repailDetail = ref({})
function get_detail(id) {
	deRepairApi.repair_detail(id).then(data => {
		detail_record.value = data
		detail_record.value.picture = data.file_urls.split(',')
		repailDetail.value = data.repair_record[0]
		detail_record.value.repairImg = data.repair_record[0]?.file_urls.split(',')
	})
}

const previewImage = (img) => {
	// uniapp 原生预览图片方法
	uni.previewImage({
		current: img.url || img,  // 当前显示图片
		urls: [img.url || img]    // 图片列表
	})
}

</script>

<style lang="scss"></style>